<template>
	<!-- 公益卡 -->
	<view id="container">
		<image class="bgi" src="https://z3.ax1x.com/2021/09/02/hD6XYn.png" mode=""></image>
		<view class="community">
			<image class="img" src="https://z3.ax1x.com/2021/09/02/hD62od.jpg" mode=""></image>
			<view class="info">
				<image class="icon" :src="vuex_user_info.headimgurl" mode=""></image>
				<view class="ziliao">
					<view class="title">
						<text class="name">{{info.name}}</text>
						<image class="gender-pic" style="" :src="info.gender==1?boy:girl" mode=""></image>
						<text class="renzheng" @click="to_auth_page">{{info.has_authed==0?'未认证':'已认证'}}</text>
					</view>
					<view class="msg">
						<text style="margin-right: 80rpx;">影响力：{{info.affect}}</text>
						<text>加入时长：{{info.time}}天</text>
					</view>
					<view class="content">{{info.signature}}</view>
				</view>
			</view>
		</view>

		<!-- 编辑个性签名 -->
		<view class="editor">

			<view class="title">
				<text class="txt">编辑我的资料</text>
			</view>

			<view class="edit-box" style="">
				<view class="nick">
					<text style="margin-right: 10rpx;">昵称 :</text>
					<input type="text" v-model="submit_data.nickname" placeholder="新的昵称" />
				</view>
				<view class="gender">
					<text style="margin-right: 10rpx;">性别 :</text>
					<radio-group class="radio">
						<label class="cell" v-for="(item, index) in sex_box" @click="radioChange(index)">
							<radio />
							<text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
				<view class="sianature">
					<text style="width: 80rpx;">签名</text>
					<textarea class="content" v-model="submit_data.signature" :placeholder="old_signature" style="" />
				</view>
				<button @click="submit" size="mini" style="width: 30%;">保存</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				old_signature: '编辑你的签名,公益卡片当你的头像被点击时，可以展示出来',
				info: {
					name: '',
					time: 0,
					affect: 0,
					signature: '',
					has_authed: 0,
					gender: 1
				},
				sex_box: [{
						value: 1,
						name: '男',
					},
					{
						value: 2,
						name: '女'
					}
				],
				submit_data: {
					nickname: '',
					gender: '',
					signature: ''
				},
				boy: '../../../static/mine/nan.png',
				girl: '../../../static/mine/nv.png',
			};
		},
		onLoad() {
			let self = this
			this.$u.api.get_lovecard_info().then(
				res => {
					self.info.time = res.data.days
					self.info.name = res.data.name
					self.info.affect = res.data.i_film
					self.info.signature = res.data.bardian
					self.info.has_authed = res.data.sgs
					self.info.gender = res.data.sex
				})
		},
		methods: {
			onkeyboard_confirm() {
				// do nothing
			},
			// 提交
			submit() {
				// return
				let self = this
				this.$u.api.update_lovecard_info({
					name: this.submit_data.nickname,
					sex: this.submit_data.gender,
					bardian: this.submit_data.signature
				}).then(
					res => {
						if (res.code == 200) {
							self.info.name = self.submit_data.nickname
							self.info.signature = self.submit_data.signature
							self.info.gender = self.submit_data.gender

							self.submit_data = {
								nickname: '',
								gender: '',
								signature: ''
							}
							uni.showToast({
								title: '设置成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '网络较差, 请待会重试',
								icon: 'error'
							})
						}
					})
			},
			// 获取性别
			radioChange(index) {
				this.submit_data.gender = this.sex_box[index].value
			},
			// 进入认证界面
			to_auth_page() {
				uni.navigateTo({
					url: './certification'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	#container {
		height: 100%;
		width: 100%;

		.bgi {
			width: 750rpx;
			height: 100rpx;
		}

		.community {
			width: 680rpx;
			background-color: #fff;
			margin: 0 auto;
			position: relative;
			top: -30px;
			box-shadow: 4px 4px 10px #b3b3b3;
			border-radius: 10px;
			overflow: hidden;
			position: relative;

			.img {
				width: 100%;
			}

			.info {
				display: flex;
				padding: 12px 51px 16px 21px;
				position: absolute;
				bottom: 0;
				background-color: #fff;
				width: 100%;

				.icon {
					flex: 0 0 43px;
					width: 43px;
					height: 43px;
					border: 3px solid rgba(0, 0, 0, 0.3);
					border-radius: 5px;
					margin-right: 8px;
					transform: translateY(-65%);
				}

				.ziliao {

					// width: 450rpx;
					.title {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 15px;

						.name {
							width: auto;
							font-size: 12px;
							color: #FF3333;
							margin-right: 15rpx;
						}

						.gender-pic {
							width: 28rpx;
							height: 28rpx;
						}

						.renzheng {
							text-align: center;
							font-size: 9px;
							background: #3F495D;
							border-radius: 8px;
							color: #C7BA8D;
							margin-left: 10px;
							padding: 3px 20rpx;
						}
					}

					.msg {
						font-size: 9px;
						margin-bottom: 17px;
					}

					.content {
						font-size: 9px;
						color: #7C7C7C;
					}
				}
			}
		}

		.editor {
			width: 100%;
			height: 50%;
			background-color: #fff;
			margin-top: 20px;
			position: absolute;
			bottom: 0;

			.title {
				font-size: 32rpx;
				color: #E51D1D;
				box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
				padding: 17rpx 25rpx;
			}

			.edit-box {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				height: 100%;
				width: 100%;
				padding: 20rpx 13rpx 47rpx 26rpx;
				// border: 5px solid #000000;
				width: 100%;
				background-color: #fff;

				.nick {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					width: 100%;
				}

				.gender {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					width: 100%;

					// border: 1px solid #007AFF;
					.radio {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						// border: 1px solid #007AFF;
						.cell {
							display: flex;
							flex-direction: row;
							justify-content: space-around;
							align-items: center;
							margin-right: 80rpx;
						}
					}
				}

				.sianature {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.content {
						width: 100%;
						height: 200rpx;
						border-radius: 8rpx;
						border: 1px solid #DCDCDC;
						padding: 5rpx 10rpx;
						font-size: 25rpx;
						padding: 20rpx 10rpx;
					}
				}
			}
		}
	}
</style>
